<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        iframe {
            border: none;
            position: absolute;
            top: 0;
            left: 0;
        }

        .iframeBox {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1000;
            background-color: rgba(255, 255, 255, 0);
            display: none;
        }

        .user-select-disable {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .btns {
            list-style: none;
            position: fixed;
            bottom: 0;
            right: 0;
            z-index: 1001;
        }

        .btns > li {
            margin-bottom: 10px;
            cursor: pointer;
        }

        #Img {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
    </style>
</head>
<body>
<div class="iframeBox" draggable="true">
    <img src="images/1.jpg" id="Img"/>
</div>
<iframe id='iframeBox' src="2.html" width="100%" height="100%">frame框</iframe>
<ul class="btns">
    <li>
        <button id="expand">放大</button>
    </li>
    <li>
        <button id="narrow">缩小</button>
    </li>
    <li>
        <button id="restore">还原</button>
    </li>
</ul>
<script src="jquery-2.2.0.min.js"></script>
<script type="text/javascript">
    var expandBtn = $('#expand');
    var narrowBtn = $('#narrow');
    var restoreBtn = $('#restore');
    var frameBox = $('#iframeBox');
    var dragMask = $('.iframeBox');
    var isScale = false;
    var dragAble = false;
    var clickNum = 5;
    var startTime, endTime;
    expandBtn.on('click', function () {
        dragMask.show().css('cursor', '-webkit-zoom-in');
        console.log('放大iframe');
        isScale = true;
//        dragMask.on('mousemove', cursorStyle);
    });
    narrowBtn.on('click', function () {
        dragMask.show().css('cursor', '-webkit-zoom-out');
        console.log('缩小iframe');
        isScale = false;
//        dragMask.on('mousemove', cursorStyle)
    });
    //    function cursorStyle(e) {
    //        $('#Img').css({
    //            'left': e.clientX + 10 + 'px',
    //            'top': e.clientY + 10 + 'px'
    //        }).show();
    //    }
    restoreBtn.on('click', function () {
        isScale = false;
        dragAble = false;
        clickNum = 5;
        offX = 0;
        offY = 0;
        targetCurrentX = 0;
        targetCurrentY = 0;
        targetX = 0;
        targetY = 0;
        dragMask.hide();
//        $('#Img').hide().css({
//            'left': 0,
//            'top': 0
//        });
        frameBox.css({
            'transform-origin': '0 0',
            'transform': 'scale(1)',
            'left': '0px',
            'top': '0px'
        });
    });
    var offX = 0;
    var offY = 0;
    var targetCurrentX = 0;
    var targetCurrentY = 0;
    var targetX = 0;
    var targetY = 0;
    dragMask.on('click', function (e) {
        console.log(startTime, endTime);
        var stagePointX = e.clientX;
        var stagePointY = e.clientY;
        targetX = (stagePointX - offX) / (clickNum * 0.2);
        targetY = (stagePointY - offY) / (clickNum * 0.2);
        if (isScale && clickNum < 20) {
            clickNum++;
        } else if (!isScale && clickNum > 5) {
            clickNum--;
        }
        targetCurrentX = targetX * (clickNum * 0.2) + offX;
        targetCurrentY = targetY * (clickNum * 0.2) + offY;
        offX -= targetCurrentX - stagePointX;
        offY -= targetCurrentY - stagePointY;
//        console.log(clickNum*0.2);
//        console.log('stagePointX:'+ stagePointX);
//        console.log('stagePointY:'+ stagePointY);
//        console.log('targetX:'+targetX);
//        console.log('targetY:'+targetY);
//        console.log('targetCurrentX:'+targetCurrentX);
//        console.log('targetCurrentY:'+targetCurrentY);
//        console.log('offX :'+offX );
//        console.log('offY :'+offY );
//        console.log('-----------------------');
        if (offX > 0) {
            offX = 0
        } else if (offX <= parseFloat(document.body.clientWidth) * (1 - clickNum * 0.2)) {
            offX = parseFloat(document.body.clientWidth) * (1 - clickNum * 0.2)
        }
        if (offY > 0) {
            offY = 0
        } else if (offY <= parseFloat(document.body.clientHeight) * (1 - clickNum * 0.2)) {
            offY = parseFloat(document.body.clientHeight) * (1 - clickNum * 0.2)
        }
        frameBox.css({
            'transform-origin': '0 0',
            'transform': 'scale(' + (0.2 * clickNum) + ')',
            'left': offX + 'px',
            'top': offY + 'px'
        })
    });


    var startX, startY, offsetX, offsetY, endX, endY;
    dragMask.on('dragstart', mousedownHandler);
    document.on('dragover', mouseupHandler);
    function mousedownHandler(e) {
//        startTime = new Date().getTime();
//        endTime = endTime || startTime;
        dragMask.css('cursor','move');
        startX = e.clientX;
        startY = e.clientY;
        dragMask.on('dragend', mousemoveHandler);
//        if (endTime - startTime > 300 &&　clickNum > 5) {
//
//        } else if (endTime - startTime <= 300 && clickNum === 5) {
//            return false;
//        }


    }
    function mousemoveHandler(e) {
//        dragMask.css('cursor', 'pointer');

        dragMask.css('cursor','move');
        offsetX = parseFloat(frameBox.css('left')) - startX;
        offsetY = parseFloat(frameBox.css('top')) - startY;
        endX = e.clientX + offsetX;
        endY = e.clientY + offsetY;
        if (endX > 0) {
            endX = 0
        } else if (endX <= parseFloat(document.body.clientWidth) * (1 - clickNum * 0.2)) {
            endX = parseFloat(document.body.clientWidth) * (1 - clickNum * 0.2)
        }
        if (endY > 0) {
            endY = 0
        } else if (endY <= parseFloat(document.body.clientHeight) * (1 - clickNum * 0.2)) {
            endY = parseFloat(document.body.clientHeight) * (1 - clickNum * 0.2)
        }
        console.log('dragX:' + offsetX, 'dragY:' + offsetY, 'clickNum:' + clickNum);
        console.log('dragX:' + endX, 'dragY:' + endY, 'clickNum:' + clickNum);
        frameBox.css({
            'left': endX + 'px',
            'top': endY + 'px'
        });
        if (e && e.preventDefault) e.preventDefault();
    }
    function mouseupHandler() {
//        endTime = new Date().getTime();
//        dragMask.off('mousedown', mousedownHandler);
//        dragMask.on('mouseover', mousemoveHandler);
//        dragMask.on('mousemove', cursorStyle).css('cursor', 'pointer');
    }

</script>
</body>
</html>